Subscribe Mobile · Test Scenarios
+ Playwright Mobile Automation Guide

01บทนำ · About This Guide

Mobile-specific test scope · devices · gestures

เอกสารนี้เป็น Mobile Test Documentation สำหรับหน้าจอ Subscribe Mobile v2.0 ครอบคลุม:

• Test Scenarios · 15 test areas — 6-step wizard + mobile-specific behavior
• Test Cases · 78 cases — Positive / Negative / Boundary / UI / Integration / Mobile / A11y
• Playwright Mobile Guide — Pixel 5 · iPhone 14 emulation · touch · geolocation · camera
• Mobile-specific coverage — Bottom sheet modal · virtual keyboard · slip upload via camera · offline · orientation

02Mobile Overview

Layout · gestures · mobile-specific components

📱 Mobile Layout

• Fixed viewport: Portrait 375×812 (iPhone) or 411×914 (Pixel 5) · phone frame on desktop preview
• Topbar (sticky): Logo · TH/EN language toggle · progress dots
• Header (per-step): Eyebrow "Step X / 6" · title · subtitle
• Content (scrollable): Main step content · scrolls under fixed footer
• Footer (fixed bottom): "ย้อนกลับ" + primary CTA (ถัดไป / ชำระเงิน / เริ่มใช้งาน)
• Toast: Bottom center · above footer · auto-dismiss ~2.5s
• Bottom sheet modal: Add User form · slide-up from bottom · backdrop

🗺️ Wizard Structure

💎 4 Packages (identical to Web)

• Trial (free) — 30-day free · locked duration · payment hidden
• Starter — ฿3,900/mo · 10 users · 3 projects · SME
• Professional — ฿7,900/mo · 30 users · 15 projects · default selection
• Enterprise — Contact Sales · SSO · unlimited

📱 Mobile-Specific Components

• Bottom sheet modal (Add User) — slides up · backdrop tap dismiss · scroll inside
• Tambon autocomplete list — appears below input · tap to select · auto-fill 3 fields
• T&C accordion — 11 articles · tap header to expand · smooth animation
• Payment tabs — 3 tabs (QR default · Card · Bank) · swipe-like tap only (no gesture swipe)
• Slip upload — camera capture or gallery pick · preview after select
• Trial notice — replaces payment tabs when free package chosen
• Duration picker — +/- stepper · locked state for Trial (fixed 30 days)

03Mobile Test Strategy

Devices · gestures · special mobile scenarios

📱 Target Devices

🎯 Test Types

⚡ Priority

• P1 — Critical · payment · signup completion · Trial lock · touch input
• P2 — High · validation · bottom sheet · virtual keyboard behavior
• P3 — Medium · orientation · UI polish · edge devices

🌐 Mobile-Specific Considerations

• Touch targets — Minimum 44×44px per iOS HIG / 48×48dp per Material
• Virtual keyboard — Fields must remain visible when keyboard opens · scroll into view
• Camera permission — Test prompt · deny · fallback to gallery
• Network — Test on 4G · slow 3G · offline · retry after reconnect
• Font scaling — Respect OS accessibility font size (Dynamic Type on iOS · Font Scale on Android)
• Safe area — Respect notch/dynamic island · home indicator

04Test Scenarios + Test Cases

15 areas · 78 detailed mobile test cases

4.1 · 🚀 App Launch + Topbar

4.2 · 📜 Step 01 · Terms & Conditions

4.3 · 💎 Step 02 · Choose Package

4.4 · 🏢 Step 03 · Company Details

4.5 · 👥 Step 04 · Users (Bottom Sheet Modal)

4.6 · 💳 Step 05 · Payment

4.7 · 🎉 Step 06 · Welcome

4.8 · 🔒 Trial Lock (Mobile v22-v25)

4.9 · 👆 Touch Gestures

4.10 · ⌨️ Virtual Keyboard

4.11 · 📷 Slip Camera Upload

4.12 · 🌐 Language Toggle

4.13 · 📡 Offline / Poor Network

4.14 · 🔄 Orientation + Safe Area

4.15 · ♿ Mobile Accessibility

05Playwright Mobile Automation Guide

Device emulation · touch · geolocation · camera · sample tests

🚀 Mobile Setup

1. Install: npm init playwright@latest · include Mobile Chrome + Mobile Safari projects
2. Config: add devices Pixel 5 + iPhone 14 to playwright.config.ts
3. Touch: enable hasTouch: true and isMobile: true in device config
4. Geolocation/Camera: grant permissions via context.grantPermissions([...])
5. Slip fixture: pre-generated slip JPG in fixtures/slips/ · use setInputFiles()
6. Network throttle: use context.route() for slow 3G simulation

⚙️ playwright.config.ts · Mobile Projects

TypeScriptimport { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    locale: 'th-TH',
  },
  projects: [
    // Primary mobile targets
    { name: 'iPhone 14', use: { ...devices['iPhone 14'] }},
    { name: 'Pixel 5',   use: { ...devices['Pixel 5'] }},

    // Edge devices
    { name: 'iPhone SE',       use: { ...devices['iPhone SE'] }},
    { name: 'Galaxy S9+',      use: { ...devices['Galaxy S9+'] }},
    { name: 'iPad Mini',       use: { ...devices['iPad Mini'] }},
  ]
});

🎯 SubscribeMobilePage POM

TypeScriptimport { Page, Locator, expect } from '@playwright/test';

export class SubscribeMobilePage {
  readonly page: Page;
  readonly btnNext: Locator;
  readonly btnBack: Locator;
  readonly progressDots: Locator;

  constructor(page: Page) {
    this.page = page;
    this.btnNext = page.locator('.ph-foot button').last();
    this.btnBack = page.locator('.ph-foot button').first();
    this.progressDots = page.locator('.ph-step');
  }

  async goto() { await this.page.goto('/subscribe-mobile'); }

  async tapNext() { await this.btnNext.tap(); }

  async acceptTerms() {
    await this.page.locator('input[type="checkbox"]').first().check();
    await this.page.locator('input[type="checkbox"]').last().check();
    await this.tapNext();
  }

  async selectPackage(id: 'trial' | 'starter' | 'pro' | 'enterprise') {
    await this.page.locator(`[data-pkg="${id}"]`).tap();
    await this.tapNext();
  }

  async openAddUserSheet() {
    await this.page.getByRole('button', { name: /เพิ่มผู้ใช้งาน/ }).tap();
    await this.page.locator('.user-modal').waitFor({ state: 'visible' });
  }

  async uploadSlip(filePath: string) {
    const input = this.page.locator('input[type="file"][accept*="image"]');
    await input.setInputFiles(filePath);
  }
}

✅ Sample Test · Full Mobile E2E (Trial · no payment)

TypeScriptimport { test, expect } from '@playwright/test';
import { SubscribeMobilePage } from '../pages/SubscribeMobilePage';

test.describe('Subscribe Mobile · E2E', () => {
  test.use({ ...devices['Pixel 5'] });  // override device for this suite

  test('TC-E2E-M01 · Trial signup · skip payment', async ({ page, context }) => {
    const sub = new SubscribeMobilePage(page);
    await sub.goto();

    // Step 1 · T&C
    await sub.acceptTerms();

    // Step 2 · Trial
    await sub.selectPackage('trial');

    // Step 3 · Company (tap fields · fill · autocomplete)
    await page.getByLabel(/ชื่อบริษัท/).fill('ธาร์ณัส จำกัด');
    await page.getByLabel(/เลขผู้เสียภาษี/).fill('0105561234567');
    await page.getByLabel(/ตำบล/).fill('ห้วยขวาง');
    await page.locator('.addr-item').first().tap();  // pick autocomplete
    await page.getByLabel(/อีเมล/).fill('admin@tarnas.co.th');
    await page.getByLabel(/โทรศัพท์/).fill('0812345678');
    await sub.tapNext();

    // Step 4 · Add user via bottom sheet
    await sub.openAddUserSheet();
    await page.getByLabel(/ชื่อ/).fill('สมชาย');
    await page.getByLabel(/อีเมล/).fill('somchai@tarnas.co.th');
    await page.getByLabel(/โทรศัพท์/).fill('0812345678');
    await page.getByLabel(/รหัสผ่าน/).fill('Password123');
    await page.getByLabel(/บทบาท/).selectOption('pm');
    await page.getByRole('button', { name: /บันทึก/ }).tap();
    await sub.tapNext();

    // Step 5 · Trial notice · locked duration · direct advance
    await expect(page.locator('.trial-notice')).toBeVisible();
    await expect(page.locator('.pay-tabs')).not.toBeVisible();
    await sub.tapNext();

    // Step 6 · Welcome
    await expect(page.getByText(/ขอแสดงความยินดี|Welcome/)).toBeVisible({ timeout: 10000 });
  });

  test('TC-M59 · Trial locked duration', async ({ page }) => {
    const sub = new SubscribeMobilePage(page);
    await sub.goto();
    await sub.acceptTerms();
    await sub.selectPackage('trial');
    // jump to step 5 via progress dots
    await page.locator('[data-s="4"]').tap();
    await expect(page.locator('.dur-box.is-locked')).toBeVisible();
    await expect(page.locator('.dur-box .btn-minus')).toBeDisabled();
  });

  test('TC-M30 · Add-User modal is bottom sheet', async ({ page }) => {
    const sub = new SubscribeMobilePage(page);
    await sub.goto();
    await sub.acceptTerms();
    await sub.selectPackage('pro');
    // skip to Step 4 · Users
    await page.locator('[data-s="3"]').tap();
    await sub.openAddUserSheet();
    const sheet = page.locator('.user-modal');
    const box = await sheet.boundingBox();
    // verify sheet appears from bottom half of viewport
    expect(box!.y).toBeGreaterThan(100);
  });

  test('TC-M65 · Virtual keyboard · field scrolls into view', async ({ page }) => {
    const sub = new SubscribeMobilePage(page);
    await sub.goto();
    await sub.acceptTerms();
    await sub.selectPackage('pro');
    await page.locator('[data-s="2"]').tap();
    const phone = page.getByLabel(/โทรศัพท์/);
    await phone.focus();
    // simulate keyboard by reducing viewport height
    await page.setViewportSize({ width: 393, height: 500 });
    const box = await phone.boundingBox();
    expect(box!.y).toBeLessThan(400);  // field visible above 400px
  });
});

📷 Camera Mock (for slip upload tests)

TypeScript// Playwright doesn't emulate real camera · use setInputFiles with fixture
test('TC-M47 · Slip upload via capture (mocked)', async ({ page, context }) => {
  // Grant camera permission
  await context.grantPermissions(['camera']);

  const sub = new SubscribeMobilePage(page);
  await sub.goto();
  // ... navigate to payment step ...

  // Upload fixture slip image (bypasses native camera picker)
  await sub.uploadSlip('fixtures/slips/valid-slip.jpg');

  // Verify preview appears
  await expect(page.locator('.slip-preview img')).toBeVisible();
});

📡 Network Throttling · Slow 3G

TypeScripttest('TC-M75 · Slow 3G · loading state visible', async ({ page, context }) => {
  // Throttle · Chrome DevTools Protocol
  const client = await context.newCDPSession(page);
  await client.send('Network.emulateNetworkConditions', {
    offline: false,
    downloadThroughput: 400 * 1024 / 8,   // 400 kbps
    uploadThroughput: 400 * 1024 / 8,
    latency: 400
  });

  // ... complete signup flow · verify spinner ...
});

06Appendix

📌 Version History

• ConstructQ_Subscribe_Mobile.html · source · phone frame preview · 6-step wizard
• v1.0 · earlier release (task #118)
• v2.0 · 13 ก.ค. 2569 · Refresh · 78 mobile-specific test cases · 15 areas · added Bottom Sheet Modal · Touch · Virtual Keyboard · Camera · Offline · Orientation coverage

🔗 References

• Playwright Mobile: https://playwright.dev/docs/emulation
• Playwright Devices: https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
• iOS HIG Touch Target: https://developer.apple.com/design/human-interface-guidelines/accessibility
• Material Touch Target: https://m3.material.io/foundations/accessible-design/accessibility-basics
• Test cards (Omise): 4242 4242 4242 4242 success, 4000 0000 0000 0002 declined

📊 Excel Companion

ดูไฟล์ ConstructQ_Subscribe_Mobile_TestScenario_v2.0.xlsx คู่กัน · 4 sheets: Summary · Test Scenarios · Test Cases · Playwright Mobile Coverage